<template>
  <div id="container-column"></div>
</template>

<script>
import { Column } from "@antv/g2plot";

var column = null;

export default {
  name: "WordDataColumn",
  props: {
    data: [],
  },
  mounted() {
    column = new Column("container-column", {
      data: this.$props.data,
      supportCSSTransform: "true",
      xField: "date",
      yField: "value",
      seriesField: "type",
      isGroup: "true",
      autoFit: "true",
      forceFit: "true",
      colorField: "type",
      color: ["#FFE082", "#81C784", "#64B5F6", "#F48FB1"],      columnStyle: {
        radius: [6, 6, 0, 0],
        fillOpacity: 0.9,
        stroke: "rgba(255, 255, 255, 0.2)",
        lineWidth: 1,
      },xAxis: {
        label: {
          style: {
            fill: "#FFFFFF",
            fontSize: 11,
            fontWeight: 500,
          },
        },
        grid: {
          line: {
            style: {
              stroke: "rgba(255, 255, 255, 0.15)",
              lineWidth: 1,
            },
          },
        },
      },      yAxis: {
        label: {
          style: {
            fill: "#FFFFFF",
            fontSize: 11,
            fontWeight: 500,
          },
        },
        grid: {
          line: {
            style: {
              stroke: "rgba(255, 255, 255, 0.15)",
              lineWidth: 1,
            },
          },
        },
      },      legend: {
        itemName: {
          style: {
            fill: "#FFFFFF",
            fontSize: 11,
            fontWeight: 500,
          },
        },
      },
    });
    column.render();
  },
  updated() {
    column.changeData(this.$props.data);
  },
};
</script>

<style scoped>
#container-column {
  width: 100% !important;
  min-height: 300px !important;
  flex: 1;
  background: transparent !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  padding: 10px !important;
  border: none !important;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

#container-column:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}
</style>